import React from 'react';
import {StyleSheet, View, Image, Text, Alert, StatusBar, ImageBackground} from 'react-native';
import * as Color from "../../../lib.xjs/constant/Color";
import TouchableItem from "react-navigation/src/views/TouchableItem";

import {
    packageVersion,
    currentVersion,
} from 'react-native-update';

const bg = require('../../../../img/gaqu/ic_role_bg.png');
const ic_finance = require('../../../../img/gaqu/ic_finance.png');
const ic_service = require('../../../../img/gaqu/ic_service.png');
const ic_statistics = require('../../../../img/gaqu/ic_statistics.png');
const ic_role_logo = require('../../../../img/gaqu/ic_role_logo.png');

import Global from './../../../gaqu/Global';
import StorageUtil from "../../../lib.xjs/util/StorageUtil";
import {NavigationActions} from "react-navigation";

/** 选择角色 */
export default class RoleSelect extends React.Component {
    static navigationOptions = ({navigation}) => ({
        title: '登录',
        // header: null,
    });

    constructor(props) {
        super(props);
        this.state = ({});
    }

    render() {
        return (
            <ImageBackground style={styles.container} source={bg} resizeMode={Image.resizeMode.cover}>
                <StatusBar
                    hidden={true}
                    translucent={true}
                    backgroundColor={Color.colorPrimaryDark}/>
                <View style={styles.line}>
                    <TouchableItem style={styles.pic_item} onPress={() => this._switchService()}>
                        <View style={styles.line_layout}>
                            <Image style={styles.pic} source={ic_finance} resizeMode={Image.resizeMode.contain}/>
                            <Text style={styles.text}>客服</Text>
                        </View>
                    </TouchableItem>
                    <View style={styles.vertical_line}/>
                    <TouchableItem style={styles.pic_item} onPress={() => this._switchFinance()}>
                        <View style={styles.line_layout}>
                            <Image style={styles.pic} source={ic_service} resizeMode={Image.resizeMode.contain}/>
                            <Text style={styles.text}>财务</Text>
                        </View>
                    </TouchableItem>
                </View>
                <View style={styles.horizontal_line}/>
                <View style={styles.line}>
                    <TouchableItem style={styles.pic_item} onPress={() => this._switchStatistics()}>
                        <View style={styles.line_layout}>
                            <Image style={styles.pic} source={ic_statistics} resizeMode={Image.resizeMode.contain}/>
                            <Text style={styles.text}>统计</Text>
                        </View>
                    </TouchableItem>
                    <View style={styles.vertical_line} />
                    <TouchableItem style={styles.pic_item} onPress={() => this._switchLogo()}>
                        <View style={styles.line_layout}>
                            <Image style={styles.pic} source={ic_role_logo} resizeMode={Image.resizeMode.contain}/>
                        </View>
                    </TouchableItem>
                </View>
            </ImageBackground>
        );
    }

    /** 客服 */
    _switchService(){
        global.bizUser.roleId = 3;
        global.bizUser.roleName = "客服";
        this.props.navigation.navigate("CabinList");
    }

    /** 财务 */
    _switchFinance(){
        global.bizUser.roleId = 4;
        global.bizUser.roleName = "财务";
        this.props.navigation.navigate("RefoundList");
    }

    /** 统计 */
    _switchStatistics(){
        global.bizUser.roleId = 1;
        global.bizUser.roleName = "统计";
        this.props.navigation.navigate("CabinReportList");
        // this.props.navigation.navigate("CabinReport");
    }

    _switchLogo(){
        Alert.alert(
            '当前版本' + packageVersion,
            '退出登录',
            [
                {text: '是', onPress: () => this._doLogout()},
                {text: '否', onPress: () => {}},
            ],
            {
                cancelable: true,
            }
        )
    }

    _doLogout(){
        StorageUtil.getInstance().doSave("history", {});
        global.bizUser = {};
        // 清空栈跳转
        let resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({routeName:'GaQuLogin'}) // 要跳转到的页面名字
            ]
        });
        this.props.navigation.dispatch(resetAction);
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        // alignItems: 'center',
        justifyContent: 'flex-end',
        paddingBottom: 20,
        paddingLeft:10,
        paddingRight:10,
    },

    bg: {
        flex: 1,
        position: 'absolute',   //相对父元素进行绝对定位
    },

    line: {
        flexDirection: 'row',
    },

    pic_item: {
        flex: 1,
        paddingVertical: 5,
    },

    pic: {
        height: 80,
        width: 80,
    },

    line_layout: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop:5,
        paddingBottom:5,
    },

    text: {
        color: Color.white,
    },

    horizontal_line: {
        height:0.5,
        backgroundColor:Color.white,
    },

    vertical_line: {
        width:0.5,
        backgroundColor:Color.white,
    },
});


